<!--
 * @description  :单选组件
 * @descriptionDetail:单选组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-08-11 09:52:43
-->
<template>
  <view class="single-page">
    <theme-navbar
      :isBack="false"
      :is-white="false"
      title="请选择"
    >
      <view class="nav-right-icon" @click="handlerConfirm">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <u-row
        class="credit-container"
        v-for="(item, idx) in mDatas"
        :key="idx"
        @click="handlerSelectItem(item)"
      >
        <u-col span="11" style="padding-right:0;">
          <view class="title">
            {{ item.name }}
          </view>
        </u-col>
        <u-col span="1" style="text-align:right;">
          <u-icon
            name="checkbox-mark"
            color="#2979ff"
            size="38"
            v-if="selectedItem.uid == item.uid"
          ></u-icon>
        </u-col>
        <u-divider :color="$theme.u_type_primary" half-width="100%"></u-divider>
      </u-row>
    </view>
  </view>
</template>

<script>
export default {
  name: "MSingleChoice",
  props: {
    /** 
     * {uid: 唯一键, name: 名称, exts: ['额外显示值1','额外显示值2']}
     */
    mDatas: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectedItem: {},     // 选中项
    };
  },
  methods: {
    // 选中
    handlerSelectItem(item) {
      this.selectedItem = item;
    },
    // 确认
    handlerConfirm() {
      this.$emit("m-select", this.selectedItem);
    },
  },
};
</script>
<style lang="scss" scoped>
.single-page {
  padding: 10px;
  .nav-right-icon {
    color: #FFF;
    margin-right: 15px;
  }
  .u-checkbox-group {
    width: 100%;
  }
  .credit-container {
    height: 80rpx;
    .info {
      margin-top: 10px;
      .info-item {
        color: #424242;
      }
    }
		.title{
			line-height: 80rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
  }
}
</style>